<%@page import="Eclass.Question.QuestionForm"%>
<%@page import="Forum.ForumThreadForm"%>
<%@ taglib uri="/WEB-INF/tld/struts-html.tld" prefix="html"%>
<%@ taglib uri="/WEB-INF/tld/struts-logic.tld" prefix="logic"%>
<%@ taglib uri="/WEB-INF/tld/struts-bean.tld" prefix="bean"%>

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="/WebFinalProject/css/FinalProjectCSS.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Manage Question Pool</title>
<!-- <script src="/WebFinalProject/js/jquery.js"></script> -->
<link href="/WebFinalProject/css/FinalProjectCSS.css" rel="stylesheet" type="text/css">
<link rel="Stylesheet" type="text/css" href="js/style/jHtmlArea.css" />
<script type="text/javascript" src="js/MasterJS.js"></script>
    
<style type="text/css">
    /* body { background: #ccc;} */
    div.jHtmlArea .ToolBar ul li a.custom_disk_button 
    {
        background: url(images/disk.png) no-repeat;
        background-position: 0 0;
    }
    
    div.jHtmlArea { border: solid 1px #ccc; }
</style>

<script language="javascript">
	function load(){
		//document.getElementById("txtQuestion").value = document.forms[0].elements['qModel.question'].value;
	}
	
	function saveQuestion() {
		//alert(document.forms[0].task.value);
		if(document.forms[0].task.value == "update"){
			document.forms[0].task.value = "updateQuestion";
		}else{
			document.forms[0].task.value = "insertQuestion";
		}
		var opAns = new Array();
		opAns = document.getElementsByName('optionOfAnswer');
		//alert(document.forms[0].task.value);
		if(document.forms[0].elements['qModel.question'].value.length > 19000 || document.forms[0].elements['qModel.question'].value.length == 0) {
			alert("Question Must be 0 - 20000 Character !!!");
		}else {
			//alert("Submit");
			if(opAns.length >= 2)
			document.forms[0].submit();
			else
			alert("Minimun 2 Option Of Answer !!!");
		}
	}
	
	function validationAnswers(){
		var tableList = document.getElementById("answerList"); //find table
		var rowList = tableList.getElementsByTagName("tr");
		var rowCount = tableList.getElementsByTagName("tr").length;  //get table length
		var totAnswer = 0;
		
		for(var i=0; i<rowCount; i++){
			if(rowList[i].children[0].children[0].value != ""){
				totAnswer +=1;
			}
		}
		return totAnswer;
	}
	
	function resetNumberAnswer(){
		var tableList = document.getElementById("answerList"); //find table
		var rowList = tableList.getElementsByTagName("tr");
		var rowCount = tableList.getElementsByTagName("tr").length;  //get table length
		
		for(var i=0; i<rowCount; i++){
			(rowList[i].getElementsByTagName("img"))[0].id = i;
			//rowList[i].getElementsByTagName("hidden")[0].value =  rowList[i].getElementsByTagName("input")[0].value;
			//alert((rowList[i].children[0].children[0].value));
		}
	}
	
	function appendText() {	
		var tableList = document.getElementById("answerList"); //find table
		var rowCount = tableList.getElementsByTagName("tr").length;  //get table length
		var row;	

			var newRowHTML = document.getElementById("tabelAnswer");  //get inner HTML form		 	   
	 	   	var newRow = newRowHTML.innerHTML;
	 		row = tableList.insertRow(rowCount);  //insert new row into table 		
			row.innerHTML = newRow;
	 		row.id = "tabelAnswer";
	 		//alert(tableList.getElementsByTagName("tr")[rowCount].id);
		
		//reset fields
		var textNode = row.children[0].children[0];  //tracing node
 	    var selectNode = row.getElementsByTagName("select");
 	    textNode.value = "";
 	    selectNode[0].selectedIndex = 0;	
 	   	resetNumberAnswer();  //reset value & id
	}
	
	function deleteText(rowID){
		//alert(rowID);
		var tableList = document.getElementById("answerList"); //find table
		var rowCount = tableList.getElementsByTagName("tr").length; 
		var rowList = tableList.getElementsByTagName("tr");
		
		if(rowCount <= 2){
			//alert(rowList[0]);
			//rowList[0].setAttribute("style", "display:none;"); 
			alert("Answer options must be at least 2!");
		}else{			
			//alert(rowID);
			tableList.deleteRow(rowID);
		}		
		
		resetNumberAnswer();
	}
	
	function hideClass(){
		//document.getElementById("classid").style.display = 'none';
		hideImage();
		if(document.forms[0].elements['qModel.examFor'].value == "Trainee")
			document.getElementById("classid").style.display = '';
		else
			document.getElementById("classid").style.display = 'none';
		
		//load();
		//alert("BERHASIL");
	}
	
	function showClass(){
		if(document.forms[0].elements['qModel.examFor'].value == "Trainee")
			document.getElementById("classid").style.display = '';
		else
			document.getElementById("classid").style.display = 'none';
	}
	
// 	function uploadImg(){
// 		var str = document.forms[0].elements['filePath'].value;
// 		var res = str.substr(str.lastIndexOf("\\") + 1); 
// 	}
function uploadImg() {
		var path = document.getElementsByName('imgPath')[0].value;
		var task = 'uploadImg';
		var res = path.substr(path.lastIndexOf("\\") + 1);
		document.forms[0].elements['fileName'].value = res;
		//alert(res);
		document.getElementById('uploadImg').style.display = '';
// 		$.ajax({
// 			type : "POST",
// 			url : "/WebFinalProject/Question.do",
// 			data : "imgPath=" + path + "&task=" + task + "&fileName=" + res,
// 			success : function(response) {
// 				$('#uploadImg').html(response);
// 			},
// 			error : function(e) {
// 				alert('Error: ' + e);
// 			}
// 		});
		if(checkFile(res)){
		document.forms[0].task.value = task;
		document.forms[0].submit();
		}
		else
			alert("Not Supported File Type !!!");
	}
	function hideImage() {
// 		alert("kutu kupret!!!!");
		document.getElementById('a').style.display = 'none';
		if(document.forms[0].elements['fileName'].value == '') {
			document.getElementById('imgPath').value = "";
		} else {
			document.getElementById('imgPath').value = '<img src="'+document.getElementById('imgSrc').src+'" style="padding: 5px 7px;">';
			document.getElementById('txtQuestion').value += document.getElementById('imgPath').value;
		}
	}
	function setFocus() {
// 		alert('focus');
		document.getElementById('imgPath').focus();
		document.getElementById('imgPath').select();
// 		document.getElementById('imgPath').focus();
// 		alert('focusa');
	}
	function checkFile(path) {
		var fileName = new Array();
		fileName = path.split(".");
		alert(fileName);
		if (fileName[fileName.length - 1] == 'jpg' || fileName[fileName.length - 1] == 'jpeg' || fileName[fileName.length - 1] == 'png' || fileName[fileName.length - 1] == 'giv') {
			return true;
		} else {
			return false;
		}
	}
</script>
</head>
<body onload="javascript:hideClass(); resetNumberAnswer();">
	<center>
		<table width="1000px" class="bodyTable boxShadow">
		
			<!-- Header -->
			<tr>
				<td colspan="2"><%@include file="/include/Header.jsp"%></td>
			</tr>
		
			<!-- Content -->
			<tr>
				<td rowspan="2" width="200px" class="navigationBox"><%@include file="/include/Navigation.jsp"%></td>
				<td align="left" class="headerBox blueBackground">
					Setting > 
					<a href="/WebFinalProject/Question.do">Manage Question Pool</a> >
					<logic:equal value="update" property="task" name="questionForm">
						Update Question
					</logic:equal>
					<logic:notEqual value="update" property="task" name="questionForm">
						Add New Question
					</logic:notEqual>	
				</td>
			</tr>
			<tr>
				<td align="center"  class="contentStyle"><br>
					<html:form action="/Question" method="post" enctype="multipart/form-data">
					<html:hidden property="task"/>
					<html:hidden property="fileName"/>
					<html:hidden property="currentTask"/>
<%-- 					<html:text property="qModel.question"/> --%>
					<html:hidden property="qModel.questionPoolId"/>
						<table width="95%" border="0" align="center" class="boxShadow">
							<tr class="headerBox greyBackground">
								<th align="center" colspan="2" class="headerBox formHeaderBackground">
									<logic:equal value="update" property="task" name="questionForm">
										Update Question
									</logic:equal>
									<logic:notEqual value="update" property="task" name="questionForm">
										Add New Question
									</logic:notEqual>	
								</th>
							</tr>
							<tr>
								<td colspan="2" align="right" class="formListStyle "> <!-- style="vertical-align:top;" -->
									Exam For :
									<html:select property="qModel.examFor" name="questionForm" onchange="javascript:showClass()">
										<html:option value="Candidate">Candidate</html:option>
										<html:option value="Trainee">Trainee</html:option>
									</html:select>
									<html:select property="qModel.active" name="questionForm">
										<html:option value="1">Active</html:option>
										<html:option value="0">Inactive</html:option>
									</html:select>
								</td>
							</tr>
							<tr> 
								<td colspan="2" class="formListStyle leftAlign" width="50%">
									<div id="classid"  class="formListStyle">
									Select Class : 
									<html:select property="qModel.classId">
										<html:option value="">Select</html:option>
										<logic:notEmpty name="questionForm" property="listClass">
											<html:optionsCollection name="questionForm" property="listClass" label="className" value="classId"/>
										</logic:notEmpty>
									</html:select>
									</div>
									<div class="formListStyle">
										Select Picture : <html:file property="imgPath"></html:file>
										<input type="button" onclick="javascript:uploadImg();" value="&nbsp; Upload &nbsp;" />
									</div>
									<div id="uploadImg">
										<div id="a">
										<input type="text" id="imgPath" readonly style="width:100%;" onclick="setFocus()"/>
											<img alt="" src='<bean:write name="questionForm" property="imgPathCopy"/>' id="imgSrc" />
										</div>
									</div>	
								</td>
							</tr>							
							<tr>
								<td class="formListStyle" colspan="2">
<!-- 									Insert Question : -->
									<html:textarea property="qModel.question" style="width:100%;" rows="15" styleId="txtQuestion"></html:textarea>
<!-- 									<textarea id="txtQuestion" cols="50" rows="15"> -->
<!-- 									</textarea> -->
									<script src="/WebFinalProject/js/scripts/jquery-1.3.2.min.js"></script>
									<script type="text/javascript" src="js/scripts/jHtmlArea-0.7.5.js"></script>
								 	<script type="text/javascript">
// 								        $(function() {
// 								        	 $("textarea").htmlarea();
// 								        });
										$(function() {
										    $("textarea").htmlarea({
										    	toolbar: [
										    	          ["html"],
										    	          ["bold", "italic", "underline"],
										    	          ["strikethrough","subscript", "superscript"],
										    	          ["h1", "h2", "h3", "h4", "h5", "h6"],
										    	          ["link", "unlink"],
										    	          ["image"],
										    	          ["indent", "outdent"],
										    	          ["justifyleft", "justifycenter", "justifyright"],
										    	          ["increasefontsize", "decreasefontsize"]
										    	      ]
										    	  });
										});
								    </script>
								</td>
							</tr>
							<tr class="headerBox greyBackground">
								<td align="center" colspan="2" class="headerBox formHeaderBackground">Answers</th>
							</tr>	
							<tr>
								<td colspan="2">													
<!-- 						</table> -->
<%-- 							<% QuestionForm qf = new QuestionForm(); %> --%>
<%-- 							<% System.out.println("=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=: "+qf.getAnswer()[0].toString());%> --%>
<%-- 							<% for(int i = 0; i<qForm.getAnswer().length; i++) { %> --%>
<%-- 									<logic:notEmpty name="questionForm" property="listEdit"> --%>
<%-- 										<logic:iterate id="listData" name="questionForm" property="listEdit"> --%>
<!-- 											<table align="center" id="tabel1" border="0" width="90%"> -->
<!-- 										        <tr> -->
<!-- 										            <td class="formListStyle"><input type="checkbox" name="chk"/></td> -->
<%-- 										            <td class="formListStyle"><html:text property="optionOfAnswer" name="listData" style="width:332px"></html:text></td> --%>
<%-- 													<td><input type="text" name="answer" value="<%=qf.getAnswer()[i].toString() %>"/></td>
<!-- 										            <td class="formListStyle"> -->
<%-- 										                <html:select property="answer" name="listData"> --%>
<%-- 															<html:option value="false">FALSE</html:option> --%>
<%-- 															<html:option value="true">TRUE</html:option> --%>
<%-- 														</html:select> --%>
<!-- 										            </td> -->
<%-- 										            <td class="formListStyle" width="80%"><html:text property="optionOfAnswer" name="listData" style="width:100%;"></html:text></td> --%>
<!-- 										            <td class="formListStyle" width="15%"> -->
<%-- 										                <html:select property="answer" name="listData" style="width:100%;"> --%>
<%-- 															<html:option value="false">FALSE</html:option> --%>
<%-- 															<html:option value="true">TRUE</html:option> --%>
<%-- 														</html:select> --%>
<!-- 										            </td> -->
<!-- 										            <td align="center" class="formListStyle" width="5%"> -->
<!-- 														<img src="images/cancelButton.png" title="delete" style="cursor: pointer;" onclick="javascript:deleteText('tabel1');"/> -->
<!-- 										            </td> -->
<!-- 										        </tr> -->
<!-- 											</table> -->
<%-- 										</logic:iterate> --%>
<%-- 									</logic:notEmpty> --%>
<%-- 							<% } %> --%>
<!-- 						<table width="95%"> -->
									<table align="center" id="answerList"  border="0" width="90%">										
										<logic:notEmpty name="questionForm" property="listEdit">
											<logic:iterate id="listData" name="questionForm" property="listEdit">
										        <tr id="tabelAnswer">
										            <td class="formListStyle" width="80%">
<%-- 										            	<input type="text" value='<bean:write  property="optionOfAnswer" name="listData"/>' style="width:100%;"/> --%>
<%-- 										            	<html:hidden property="optionOfAnswer" name="listData"></html:hidden>										            	 --%>
										            	<html:text property="optionOfAnswer" name="listData" style="width:100%;"/>
										            </td>
										            <td class="formListStyle" width="15%">
										                <html:select property="answer" name="listData" style="width:100%;">
															<html:option value="false">FALSE</html:option>
															<html:option value="true">TRUE</html:option>
														</html:select>
										            </td>
										            <td align="center" class="formListStyle" width="5%">
														<img src="images/cancelButton.png" title="delete" style="cursor: pointer;" onclick="javascript:deleteText(this.id);"/>
										            </td>
										        </tr>
											 </logic:iterate>
										</logic:notEmpty>
									</table>
								</td>
							</tr>
							<tr>
								<td colspan="2" align="center" style="padding:5px 7px;">
<!-- 									<input type="button" class="buttonStyle" style="width: auto;" Value="Add Option" onclick="javascript:appendText('tabel1')"> -->
<!-- 									<input type="button" class="buttonStyle" style="width: auto;" Value="Delete Option" onclick="javascript:deleteText('tabel1')"> -->
									<div title="add option" style="cursor:pointer;" onclick="javascript:appendText();">
										<table>
											<tr>
												<td style="vertical-align: middle; padding:2px;"><img src="images/addButton.png"></td>
												<td style="vertical-align: middle; padding:2px;"><b>Add Option</b></td>
											</tr>
										</table>
									</div><br>
								</td>								
							</tr>
							<tr>
<!-- 								<td align="center" class="formListStyle"> -->
<!-- 									<input type="button" class="buttonStyle" value="Save" onclick="javascript:saveQuestion('updateQuestion')"> -->
<!-- 								</td> -->
								<td align="right" class="formListStyle" width="50%">
									<table title="save" class="buttonStyle" style="cursor: pointer;" onclick="javascript:saveQuestion();">
										<tr>
											<td style="vertical-align: middle;"><img src="images/saveButton.png"/></td>
											<td style="vertical-align: middle;"><b>&nbsp;Save&nbsp;</b></td>
										</tr>
									</table>
								</td>
								<td align="left" class="formListStyle" width="50%">			
									<table title="cancel" class="buttonStyle" style="cursor: pointer;" onclick="javascript:document.forms[0].reset();flyToPage('');">
										<tr>
											<td style="vertical-align: middle;"><img src="images/cancelButton.png"/></td>
											<td style="vertical-align: middle;"><b>&nbsp;Cancel&nbsp;</b></td>
										</tr>
									</table>
								</td>
							</tr>
						</table>
					</html:form>
					<br><br>
				</td>
			</tr>
			
			<!-- Footer -->
			<tr>
				<td align="center" colspan="2" class="headerBox blueBackground">&copy; OME. 2014. All Rights Reserved.</td>
			</tr>
		</table>
	</center>	
</body>
</html>